<%page expression_filter="h"/>
<%inherit file="base.html" />
<%def name="content_groups_help_token()"><% return "content_groups" %></%def>
<%def name="enrollment_track_help_token()"><% return "enrollment_tracks" %></%def>
<%def name="experiment_group_configurations_help_token()"><% return "group_configurations" %></%def>
<%namespace name='static' file='static_content.html'/>
<%!
from cms.djangoapps.contentstore import utils
from django.utils.translation import gettext as _
from openedx.core.djangolib.js_utils import (
    dump_js_escaped_json, js_escaped_string
)
from openedx.core.djangolib.markup import HTML, Text
from six.moves.urllib.parse import quote
%>

<%block name="title">${_("Group Configurations")}</%block>
<%block name="bodyclass">is-signedin course view-group-configurations</%block>

<%block name="header_extras">
% for template_name in ["group-configuration-details", "group-configuration-editor", "group-edit", "content-group-editor", "partition-group-details", "basic-modal", "modal-button", "list"]:
  <script type="text/template" id="${template_name}-tpl">
    <%static:include path="js/${template_name}.underscore" />
  </script>
% endfor
</%block>

<%block name="requirejs">
  require(["js/factories/group_configurations"], function(GroupConfigurationsFactory) {
      GroupConfigurationsFactory(
          ${should_show_experiment_groups | n, dump_js_escaped_json},
          ${experiment_group_configurations | n, dump_js_escaped_json},
          ${all_group_configurations | n, dump_js_escaped_json},
          "${group_configuration_url | n, js_escaped_string}",
          "${course_outline_url | n, js_escaped_string}",
          ${should_show_enrollment_track | n, dump_js_escaped_json}
      );
  });
</%block>

<%block name="content">
  <div class="wrapper-mast wrapper">
    <header class="mast has-actions has-subtitle">
      <h1 class="page-header">
        <small class="subtitle">${_("Settings")}</small>
        <span class="sr">&gt; </span>${_("Group Configurations")}
      </h1>
    </header>
  </div>

  <div class="wrapper-content wrapper">
    <section class="content">

      <article class="content-primary" role="main">

        % for config in all_group_configurations:
          <div class="wrapper-groups content-groups ${config['scheme']} ${config['id']}">
            <h3 class="title">${config['name']}</h3>
              <div class="ui-loading">
                  <p><span class="spin"><span class="icon fa fa-refresh" aria-hidden="true"></span></span> <span class="copy">${_("Loading")}</span></p>
              </div>
          </div>
        % endfor

        % if should_show_experiment_groups:
          <div class="wrapper-groups experiment-groups">
            <h3 class="title">${_("Experiment Group Configurations")}</h3>
            % if experiment_group_configurations is None:
              <div class="notice notice-incontext notice-moduledisabled">
                  <p class="copy">
                      ${_("This module is disabled at the moment.")}
                  </p>
              </div>
            % else:
              <div class="ui-loading">
                  <p><span class="spin"><span class="icon fa fa-refresh" aria-hidden="true"></span></span> <span class="copy">${_("Loading")}</span></p>
              </div>
            % endif
          </div>
        % endif
      </article>
      <aside class="content-supplementary" role="complementary">
      % if should_show_enrollment_track:
        <div class="bit">
          <div class="enrollment-track-doc">
            <h3 class="title-3">${_("Enrollment Track Groups")}</h3>
            <p>${_("Enrollment track groups allow you to offer different course content to learners in each enrollment track. Learners enrolled in each enrollment track in your course are automatically included in the corresponding enrollment track group.")}</p>
            <p>${_("On unit pages in the course outline, you can restrict access to components to learners based on their enrollment track.")}</p>
            <p>${_("You cannot edit enrollment track groups, but you can expand each group to view details of the course content that is designated for learners in the group.")}</p>
            <p><a href="${get_online_help_info(enrollment_track_help_token())['doc_url']} rel="noopener" target="_blank" class="button external-help-button">${_("Learn More")}</a></p>
          </div>
        </div>
      % endif
        <div class="bit">
          <div class="content-groups-doc">
              <h3 class="title-3">${_("Content Groups")}</h3>
              <p>${_("If you have cohorts enabled in your course, you can use content groups to create cohort-specific courseware. In other words, you can customize the content that particular cohorts see in your course.")}</p>
              <p>${_("Each content group that you create can be associated with one or more cohorts. In addition to making course content available to all learners, you can restrict access to some content to learners in specific content groups. Only learners in the cohorts that are associated with the specified content groups see the additional content.")}</p>
              <p>${Text(_("Click {em_start}New content group{em_end} to add a new content group. To edit the name of a content group, hover over its box and click {em_start}Edit{em_end}. You can delete a content group only if it is not in use by a unit. To delete a content group, hover over its box and click the delete icon.")).format(em_start=HTML("<strong>"), em_end=HTML("</strong>"))}</p>
              <p><a href="${get_online_help_info(content_groups_help_token())['doc_url']}" rel="noopener" target="_blank" class="button external-help-button">${_("Learn More")}</a></p>
          </div>
        </div>
      % if should_show_experiment_groups:
        <div class="bit">
          <div class="experiment-groups-doc">
            <h3 class="title-3">${_("Experiment Group Configurations")}</h3>
            <p>${_("Use experiment group configurations if you are conducting content experiments, also known as A/B testing, in your course. Experiment group configurations define how many groups of learners are in a content experiment. When you create a content experiment for a course, you select the group configuration to use.")}</p>
            <p>${Text(_("Click {em_start}New Group Configuration{em_end} to add a new configuration. To edit a configuration, hover over its box and click {em_start}Edit{em_end}. You can delete a group configuration only if it is not in use in an experiment. To delete a configuration, hover over its box and click the delete icon.")).format(em_start=HTML("<strong>"), em_end=HTML("</strong>"))}</p>
            <p><a href="${get_online_help_info(experiment_group_configurations_help_token())['doc_url']}" rel="noopener"  target="_blank" class="button external-help-button">${_("Learn More")}</a></p>
          </div>
        </div>
      % endif

      <div class="bit">
      % if context_course:
        <%
          url_encoded_course_id = quote(str(context_course.id).encode('utf-8'), safe='')
          details_url = utils.reverse_course_url('settings_handler', context_course.id)
          grading_url = utils.reverse_course_url('grading_handler', context_course.id)
          course_team_url = utils.reverse_course_url('course_team_handler', context_course.id)
          advanced_settings_url = utils.reverse_course_url('advanced_settings_handler', context_course.id)
        %>
      <h3 class="title-3">${_("Other Course Settings")}</h3>
        <nav class="nav-related" aria-label="${_('Other Course Settings')}">
          <ul>
            <li class="nav-item"><a href="${details_url}">${_("Details & Schedule")}</a></li>
            <li class="nav-item"><a href="${grading_url}">${_("Grading")}</a></li>
            <li class="nav-item"><a href="${course_team_url}">${_("Course Team")}</a></li>
            <li class="nav-item"><a href="${advanced_settings_url}">${_("Advanced Settings")}</a></li>
            % if mfe_proctored_exam_settings_url:
              <li class="nav-item"><a href="${mfe_proctored_exam_settings_url}">${_("Proctored Exam Settings")}</a></li>
            % endif
          </ul>
        </nav>
      % endif
      </div>
      </aside>
    </section>
  </div>
</%block>
